.recorded-course-list {
  padding-left: 20px;
  height: 710px;
  color: #fff;
  background: #242948;
  .recorded-course-list-content {
    width: 760px;
    height: 640px;
    // overflow-x: scroll;
    // &::-webkit-scrollbar {
    //   display: none;
    // }
    .recorded-item {
      width: 760px;
      // height: 360px;
      min-height: 210px;
      margin-bottom: 20px;
      background: #fff;
      border-radius: 4px;
      color: #333;
      .item-header {
        width: 760px;
        height: 150px;
        border: 1px solid #e5e5e5;
        padding: 10px;
        border-radius: 4px 4px 0 0;
        .img {
          width: 194px;
          height: 130px;
          float: left;
          position: relative;
          margin-right: 20px;
          img {
            display: block;
            width: 194px;
            height: 130px;
          }
          i {
            position: absolute;
            display: block;
            width: 52px;
            height: 24px;
            right: 0;
            top: 0;
            &.english-icon {
              background: url(../../../../images/student/english_icon.png) no-repeat;
              background-size: cover;
            }
            &.program-icon {
              background: url(../../../../images/student/program_icon.png) no-repeat;
              background-size: cover;
            }
          }
        }
        .header-right {
          float: left;
          height: 130px;
          .title {
            width: 460px;
            font-size: 18px;
            line-height: 38px;
            font-weight: 600;
            margin-bottom: 20px;
            p {
              float: left;
            }
            span {
              float: right;
              font-size: 12px;
              line-height: 38px;
            }
          }
          .recorded-content {
            display: inline-block;
            width: 460px;
            height: 14px;
            font-size: 14px;
            color: #333;
            margin-bottom: 24px;
            li {
              float: left;
              padding: 0 10px;
              border-left: 1px solid #e5e5e5;
              &:first-child {
                padding-left: 0;
                border-left: 0;
              }
            }
            .hover-pointer {
              cursor: pointer;
            }
          }
          .tips {
            font-size: 14px;
            color: #666;
          }
        }
      }
      .item-content-recorded {
        width: 760px;
        // height: 210px;
        background-color: #fafafa;
        padding-top: 24px;
        padding-left: 10px;
        padding-right: 30px;
        border-radius: 0 0 4px 4px;
        li {
          width: 100%;
          height: 50px;
          line-height: 25px;
          padding-bottom: 25px;
          font-size: 14px;
          color: #333;
          .span {
            display: inline-block;
            width: 120px!important;
            color: #333;
            span {
              display: inline-block;
              width: 90px!important;
              margin-left: 3px;
              margin-top: -6px!important;
            }
            &:hover {
              color: #43a0ff;
            }
          }
          &.unfinished {
            >i {
              border: 2px solid #bdbdbd;
              &::before {
                content: '';
                display: block;
                height: 32px;
                width: 0;
                border-left: 1px dashed #E5E5E5;
                position: absolute;
                left: 2px;
                top: 12px;
              }
            }
            .btn {
              line-height: 22px;
              color: #666;
              border: 1px solid #aaa;
              &:hover {
                color: #43a0ff;
                border: 1px solid #43a0ff;
              }
            }
          }
          &.completed {
            >i {
              border: 2px solid #43a0ff;
              &::before {
                content: '';
                display: block;
                height: 32px;
                width: 0;
                border-left: 1px dashed #43a0ff;
                position: absolute;
                left: 2px;
                top: 12px;
              }
              &.last {
                &::before {
                  content: '';
                  display: block;
                  width: 0;
                  height: 0;
                  border: none;
                }
              }
            }
            .btn {
              background: #43a0ff;
              color: #fff;
              border: none;
              line-height: 24px;
              &:hover {
                background: #5CB3FF;
              }
            }
          }
          &.unlock {
            .btn {
              background: #e5e5ee;
              color: #666;
              border: none;
              line-height: 24px;
            }
          }
          >i {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 2px solid #bdbdbd;
            margin-right: 9px;
            position: relative;
            &.last {
              &::before {
                content: '';
                display: block;
                width: 0;
                height: 0;
                border: none;
              }
            }
          }
          span {
            display: inline-block;
            &:nth-of-type(1) {
              width: 126px;
            }
            &:nth-of-type(2) {
              width: 200px;
            }
            &:nth-of-type(3) {
              width: 75px;
              margin-right: 46px;
              cursor: pointer;
              &:hover {
                color: #43a0ff;
              }
            }
            &:nth-of-type(4) {
              width: 75px;
              cursor: pointer;
              &:hover {
                color: #43a0ff;
              }
            }
            &.btn {
              float: right;
              width: 80px;
              height: 24px;
              border-radius: 12px;
              text-align: center;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}

// 清除浮动
.clearfloat:after {
  content: '';
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
}